<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" >
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">

      <div class="form-wrap">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item ref="zyhzsjjtnc" label="专业合作社及家庭农场" prop="zyhzsjjtnc">
            <a-input-number class="input-number-cx" v-model="form.zyhzsjjtnc" />
          </a-form-model-item>

          <a-form-model-item ref="ngqy" label="农工企业" prop="ngqy">
            <a-input-number class="input-number-cx" v-model="form.ngqy" />
          </a-form-model-item>

          <a-form-model-item ref="zcnysb" label="注册农业商标" prop="zcnysb">
            <a-input-number class="input-number-cx" v-model="form.zcnysb" />
          </a-form-model-item>

          <a-form-model-item ref="zydh" label="种养大户" prop="zydh">
            <a-input-number class="input-number-cx" v-model="form.zydh" />
          </a-form-model-item>

          <a-form-model-item :wrapper-col="{ span: 6, offset: 10 }">
            <a-button type="primary" @click="onSubmit">
              提交
            </a-button>
          </a-form-model-item>

        </a-form-model>

      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { query, edit } from '@/api/agriculture-total'
export default {
  data () {
    return {
      labelCol: { span: 10 },
      wrapperCol: { span: 5 },
      other: '',
      form: {
        zyhzsjjtnc: undefined,
        ngqy: undefined,
        zcnysb: undefined,
        zydh: undefined
      },
      rules: {
        zyhzsjjtnc: [
          { required: true, message: '请输入专业合作社及家庭农场', trigger: 'blur' }
        ],
        ngqy: [
          { required: true, message: '请输入农工企业', trigger: 'blur' }
        ],
        zcnysb: [
          { required: true, message: '请输入注册农业商标', trigger: 'blur' }
        ],
        zydh: [
          { required: true, message: '请输入种养大户', trigger: 'blur' }
        ]
      }
    }
  },
  created: function () {
    query().then(res => {
      console.log(res)
      if (res.data) {
        this.form.zyhzsjjtnc = res.data.zyhzsjjtnc
        this.form.ngqy = res.data.ngqy
        this.form.zcnysb = res.data.zcnysb
        this.form.zydh = res.data.zydh
      }
    })
  },
  methods: {
    onSubmit () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          edit(this.form).then(res => {
            console.log(res)
            this.$message.success('修改成功')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm () {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style scoped>
.input-number-cx {
  width: 100%;
}
</style>
